<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #090909;
        }
    </style>
</head>
<body>
    <h2>个人信息表格</h2>
    <table id="infoTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <button onclick="addRow()">添加新行</button>
    <button onclick="subRow()">删除尾行</button>
    <script>
    function addRow() {
        var table = document.getElementById("infoTable");
        var newRow = table.insertRow(-1);

        var nameCell = newRow.insertCell(0);
        nameCell.innerHTML = "<input type='text' placeholder='姓名'>";
    
        var ageCell = newRow.insertCell(1);
        ageCell.innerHTML = "<input type='number' placeholder='年龄'>";
    
        var emailCell = newRow.insertCell(2);
        emailCell.innerHTML = "<input type='email' placeholder='邮箱'>";
    }
    function subRow()
    {
        var table = document.getElementById("infoTable");
        var delRow = table.deleteRow(-1); 
    }
    
    </script>
</body>
</html>